<template>
	<view class="in-stock-form">
		<!-- 表单标题 -->
		<view class="form-header">
			<text class="form-title">入库申请单</text>
			<view class="form-code">
				<text class="">申请编号：{{ form.applyItem.applyForId }}</text>
			</view>
		</view>

		<!-- 基本信息区 -->
		<view class="form-section">
			<view class="section-title">基本信息</view>
			<view class="form-row">
				<view class="form-col-4">
					<view class="form-label">供应商</view>
					<picker mode="selector" :range="ownership" range-key="supplier_name" @change="handleOwner" :value="ownershipValue">
						<view class="form-input input_piker">{{ ownership[ownershipValue].code }}--{{ ownership[ownershipValue].supplier_name }}</view>
					</picker>
				</view>
				<view class="form-col-4">
					<view class="form-label">仓库</view>
					<picker mode="selector" :range="warehouseList" @change="selecWarehouse" :value="warehouserValue" range-key="display">
						<view class="form-input input_piker">{{ warehouseList[warehouserValue].code }}-{{ warehouseList[warehouserValue]?.warehouse_name }}</view>
					</picker>
				</view>
				<view class="form-col-4">
					<view class="form-label">预计入库日期</view>
					<view class="">
						<uni-datetime-picker type="datetime" v-model="form.applyItem.applyDate" @change="changeLog" />
					</view>
				</view>
			</view>
			<view class="form-row">
				<view class="form-col-6">
					<view class="form-label">申请人</view>
					<view class="form-input disable">{{ userInfo.username }}</view>
					<!-- <input v-model="form.applyItem.applyUser" placeholder="请输入申请人" class="form-input" /> -->
				</view>
				<view class="form-col-6">
					<view class="form-label">联系电话</view>
					<input v-model="form.applyItem.contactPhone" placeholder="请输入联系电话" class="form-input" />
				</view>
			</view>
		</view>

		<!-- 商品明细区 -->
		<view class="form-section">
			<view class="section-title">
				<view class="">商品明细</view>
				<view class="section-btn" @click="form.goodDetailShow = true">+批量申请</view>
			</view>
			<!-- 商品标题 -->
			<view class="table-header">
				<view class="th th-0">行</view>
				<view class="th th-1">商品名称</view>
				<view class="th th-2">规格型号</view>
				<view class="th th-3">单位</view>
				<view class="th th-4">数量</view>
				<view class="th th-5">数量说明</view>
				<view class="th th-6">操作</view>
			</view>
			<view class="table-body" v-for="(item, index) in form.items" :key="index">
				<view class="table-row">
					<view class="line_no">{{ index + 1 }}</view>
					<view class="td td-1">
						<input v-model="item.goodName" placeholder="输入商品名称或条码" @input="selectGood(index)" class="table-input" />
						<selectForm v-show="goodList.length > 0 && index === goodIndex" @selectItem="selectItem" :goodList="goodList"></selectForm>
					</view>
					<view class="td td-2">
						<view class="spec-input" @click="getSpec(index)" :class="{ placeholder: !item.spec.specStr }">
							{{ item.spec.specStr || '选择规格' }}
							<uni-icons v-if="item.spec.specStr" type="clear" size="20" @click="clearSpec(index)"></uni-icons>
						</view>

						<selectSpecs v-show="specIndex === index" :specs="specs" @close="specIndex = -1" @sureSpce="sureSpce"></selectSpecs>
					</view>
					<view class="td td-3" @click="unitShow(index)">
						<picker mode="selector" :range="units" @change="selecUnit" value="value">
							<view class="unit_input">{{ item.unit.unitName || '选择单位' }}</view>
						</picker>
					</view>
					<view class="td td-4">
						<input v-model.number="item.quantity" placeholder="数量" class="table-input" type="number" />
					</view>
					<view class="td td-5">
						<view>{{ unitRead(index) || '请输入数量' }}</view>
					</view>

					<view class="td td-6">
						<view class="del-btn" @click="removeItem(index)">删除</view>
						<view class="handlebatch" @click.stop="handleOrder(index)">
							<text>+验收要求</text>
							<applyforOrder v-if="orderIndex === index" @sureOrder="sureOrder" :batchOrder="item.batchOrder" :note="item.note"></applyforOrder>
						</view>
					</view>
				</view>
			</view>

			<view class="add-row">
				<view class="add-btn" @click="addItem">+ 添加商品</view>
			</view>
			<view class="total-row">
				<view class="total-col" colspan="5">申请入库品项数：</view>
				<view class="total-col" colspan="2">
					<text class="total-amount">{{ totalCount }}</text>
				</view>
			</view>
		</view>

		<!-- 备注信息区 -->
		<view class="form-section">
			<view class="section-title">备注信息</view>
			<view class="form-row">
				<view class="form-col-12">
					<view class="form-label">
						<view class=""><text style="margin-right: 50rpx">备注</text></view>
						<view class=""><button type="primary" size="mini">文件</button></view>
						<view class=""><text>(如有验收文件，原始凭证等，格式：图片文件png、jpg)</text></view>
					</view>
					<textarea v-model="form.remark" placeholder="请输入备注信息" class="form-textarea" rows="3"></textarea>
				</view>
			</view>
		</view>

		<!-- 审批流程区 -->
		<view class="form-section">
			<view class="section-title">审批流程</view>
			<view class="approval-row">
				<view class="approval-col">
					<view class="approval-title">申请人</view>
					<view class="approval-info">{{ userInfo.username }}</view>
					<view class="approval-date">{{ date }}</view>
				</view>
				<view class="approval-line"></view>
				<view class="approval-col">
					<view class="approval-title">部门主管</view>
					<view class="approval-info">待审批</view>
					<view class="approval-date">-</view>
				</view>
				<view class="approval-line"></view>
				<view class="approval-col">
					<view class="approval-title">仓库主管</view>
					<view class="approval-info">待审批</view>
					<view class="approval-date">-</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮区 -->
		<view class="form-actions">
			<button class="btn btn-secondary" @click="resetForm">重置</button>
			<button class="btn btn-primary" @click="submitForm">提交申请</button>
		</view>
		<goodDetail v-if="form.goodDetailShow" @close="form.goodDetailShow = false"></goodDetail>
	</view>
</template>

<script>
import UniDatetimePicker from '../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
import unitRead from '../../untils/unitRead';
import selectForm from '../../components/ums/selectForm.vue';
import goodDetail from '../../components/goodDetail.vue';
import selectSpecs from '../../components/ums/selectSpecs.vue';
import applyforOrder from '../../components/ums/applyforOrder.vue';
import { errForm, checkTelePhone } from '../../untils/errForm';
const db = uniCloud.database();
const CouldDb = uniCloud.importObject('getDb');
import { store, mutations } from '../../uni_modules/uni-id-pages/common/store.js';
const _ = db.command;
export default {
	name: 'ApplyForStorage',
	components: {
		UniDatetimePicker,
		goodDetail,
		selectForm,
		selectSpecs,
		applyforOrder
	},
	props: {
		ownership: {
			type: Array,
			default: () => {}
		}
	},

	data() {
		const today = new Date();
		const year = today.getFullYear();
		const month = (today.getMonth() + 1).toString().padStart(2, '0');
		const day = today.getDate().toString().padStart(2, '0');
		const randomNum = Math.floor(1000 + Math.random() * 9000);

		return {
			specs: [],
			units: [],
			ownershipValue: 0,
			warehouserValue: 0,
			value: 0,
			goodList: [], //查询的临时表
			selectedGoodList: [],
			goodIndex: -1,
			specIndex: -1,
			unitIndex: -1,
			orderIndex: -1,
			batchList: [
				{ id: '1', batchName: '编码批次', value: 'batchNo' },
				{ id: '2', batchName: '生产日期', value: 'productionDate' },
				{ id: '3', batchName: '一物一码', value: 'productionCode' },
				{ id: '4', batchName: '自定义', value: 'custom' }
			],
			productId: '',
			selecSpecShow: false,
			selectProduct: null,
			form: {
				applyItem: {
					warehouse: '',
					supplier: '',
					applyUser: '',
					applyDate: `${year}-${month}-${day}`,
					contactPhone: '',
					note: '',
					applyForId: ''
				},
				goodDetailShow: false,

				items: [{ productId: '', goodName: '', spec: { specStr: '', specIndex: [] }, unit: '', note: '', quantity: 0, price: 0, batchOrder: null }],
				remark: ''
			},
			randomNum: randomNum,
			date: `${year}-${month}-${day}`,
			applyForId: ''
		};
	},
	computed: {
		totalCount() {
			return this.form.items.reduce((sum, item) => {
				return sum + (item.productId ? 1 : 0); // 用括号明确运算顺序
			}, 0);
		},
		userInfo() {
			return store.userInfo;
		},
		warehouseList() {
			const target = this.ownership[this.ownershipValue];
			if (target && Array.isArray(target.warehouse) && target.warehouse.length > 0) {
				const res = target.warehouse.map((item) => ({ ...item, display: `${item.code}--${item.warehouse_name}` }));

				return res;
			}
			return [{ code: '0', warehouse_name: '未申请仓库' }];
		}
	},
	watch: {
		userInfo: {
			handler(newval) {
				console.log('登录用户信息', newval);
			}
		}
	},
	created() {
		this.form.applyItem.supplier = this.ownership[this.ownershipValue].code;

		this.form.applyItem.applyForId = `RK-${this.date}-${this.randomNum}`;
		uni.$on('selctedList', (res) => {
			this.items = [...this.items, ...res];
		});
	},
	destroyed() {
		uni.$off('selctedList');
	},
	methods: {
		changeLog(e) {
			this.form.applyDate = e;
		},
		selecWarehouse(e) {
			this.warehouserValue = e.detail.value;
			this.form.applyItem.warehouse = this.warehouseList[e.detail.value].code;
		},
		handleOwner(e) {
			this.ownershipValue = e.detail.value;
			this.form.applyItem.supplier = this.ownership[e.detail.value].code;
		},
		unitRead(index) {
			const good = this.selectedGoodList.find((item) => item._id === this.form.items[index].productId);
			const selectedUnitId = this.form.items[index].unit.id;
			const quantity = this.form.items[index].quantity;
			if (good && selectedUnitId && quantity > 0) {
				const units = good.unit;
				return unitRead(units, selectedUnitId, quantity);
			} else {
				return '未输入数量';
			}
		},
		handleOrder(index) {
			if (!this.form.items[index].productId) {
				uni.showToast({
					title: '请选择商品',
					icon: 'error'
				});
				return;
			}
			this.orderIndex = index;
		},

		selecUnit(e) {
			if (!this.form.items[this.unitIndex].productId) {
				uni.showToast({
					title: '请选择商品',
					icon: 'error'
				});
				return;
			}
			const good = this.selectedGoodList.find((item) => item._id === this.form.items[this.unitIndex].productId);
			if (good) {
				this.form.items[this.unitIndex].unit = good.unit[e.detail.value];
			}
		},

		unitShow(index) {
			this.unitIndex = index;
			if (this.selectedGoodList.length === 0) {
				uni.showToast({
					title: '请先选商品'
				});
				return;
			}

			const dd = this.selectedGoodList.find((item) => item._id === this.form.items[index].productId);

			if (dd) {
				this.units = dd.unit.map((item) => item.unitName);
			}
		},
		escapeRegExp(str) {
			return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
		},
		async selectGood(index) {
			this.goodIndex = index;
			const currentItem = this.form.items[index];

			// 检查商品名称是否为空（更严格的校验）
			if (!currentItem || !currentItem.goodName?.trim()) {
				uni.showToast({
					title: '请输入商品名称',
					icon: 'none'
				});
				return;
			}

			// 更完善的正则转义函数（确保特殊字符被正确处理）
			const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
			const keyword = currentItem.goodName.trim();
			const escapedKeyword = escapeRegExp(keyword);

			// 构建查询条件
			const queryCondition = {
				$or: [{ goodName: new db.RegExp({ regexp: escapedKeyword, options: 'i' }) }, { barcode: new db.RegExp({ regexp: escapedKeyword, options: 'i' }) }]
			};

			try {
				const result = await CouldDb.getDB('product', queryCondition);
				if (this._isDestroyed) return;
				// 检查接口是否成功返回（根据实际接口规范调整）
				if (!result || !result.code) {
					throw new Error(result?.message || '搜索失败，请重试');
				}

				// 区分"有数据"和"无匹配结果"
				if (Array.isArray(result.data) && result.data.length > 0) {
					this.goodList = result.data;
				} else {
					this.goodList = [];
					uni.showToast({
						title: `未找到"${keyword}"相关商品`,
						icon: 'none',
						duration: 2000
					});
				}
			} catch (error) {
				console.error('搜索出错:', error);
				if (this._isDestroyed) return;
				const errorMsg = error.message.includes('网络') ? '网络异常，请检查网络后重试' : error.message || '搜索失败，请重试';
				uni.showToast({ title: errorMsg, icon: 'none' });
				this.goodList = []; // 清空列表避免展示旧数据
			} finally {
				uni.hideLoading();
			}
		},

		addItem() {
			this.form.items.push({ productId: '', goodsName: '', spec: {}, unit: {}, quantity: 0, price: 0 });
		},
		selectItem(res) {
			this.goodList = [];
			const item = {
				productId: res._id,
				goodName: res.goodName[0].goodName,
				spec: {},
				unit: { id: res.unit.id, unitName: res.unit.unitName },
				quantity: 0,
				note: '',
				batchOrder: []
			};
			if (this.selectedGoodList.length === 0) {
				this.selectedGoodList.push(res);
			} else {
				const hasSame = this.selectedGoodList.find((selcetedgood) => selcetedgood._id === res._id);
				if (!hasSame) {
					this.selectedGoodList.push(res);
				}
			}
			this.form.items[this.goodIndex] = item;
		},

		sureSpce(res) {
			console.log(res.specStr);
			this.form.items[this.specIndex].spec.specStr = res.specStr;
		},
		clearSpec(index) {
			this.form.items[index].spec.specStr = '';
		},
		async getSpec(index) {
			this.specIndex = index;
			const productId = this.form.items[index].productId;
			console.log('porductId: ' + JSON.stringify(productId));
			try {
				const res = await CouldDb.getDB('product', { _id: productId });

				if (res.code) {
					if (res.data[0].specs?.length > 0) {
						this.specs = res.data[0].specs;
					} else {
						return;
					}
				} else {
					return;
				}
			} catch (e) {
				console.error('网络错误', e);
			}
		},
		removeItem(index) {
			if (this.form.items.length > 1) {
				this.form.items.splice(index, 1);
			} else {
				uni.showToast({
					title: '至少保留一行商品',
					icon: 'none'
				});
			}
		},
		submitForm() {
			const approval = {
				userId: this.userInfo._id,
				userPhone: this.form.applyItem.checkTelePhone,
				formType: 'ApplyForStorage',
				formDataId: this.form.applyItem.applyForId,
				createTime: Date.now()
			};

			const checkform1 = {
				warehouse: '选择仓库',
				supplier: '选择货主',
				applyUser: '填写申请人',
				applyDate: '预计库日期',
				contactPhone: '联系电话'
			};

			const upapplyItem = {
				...this.form.applyItem,
				applyUser: this.userInfo.username,
				approval: this.form.applyItem.applyForId,
				warehouse: this.warehouseList[this.warehouserValue]?.code // 增加可选链避免undefined错误
			};

			// 验证主表单
			const erritem = errForm(upapplyItem, checkform1);
			if (erritem.length > 0) {
				uni.showModal({
					title: '请完成必填项',
					content: erritem.map((m) => m.message).join('、')
				});
				return;
			}

			// 处理详情列表
			const upform = this.form.items.map((item) => ({
				...item,
				applyForId: this.form.applyItem.applyForId,
				warehouse: this.warehouseList[this.warehouserValue]?.code
			}));

			// 验证详情列表
			const checkUpform = { goodName: '商品名称', unit: '单位', quantity: '数量' };
			for (let i = 0; i < upform.length; i++) {
				const err = errForm(upform[i], checkUpform);
				if (err.length > 0) {
					uni.showModal({
						title: '请完成必填项',
						content: `第${i + 1}行的${err.map((m) => m.message).join('、')}`
					});
					return;
				}
			}

			// 确认提交
			uni.showModal({
				title: '提示',
				content: '确定提交入库申请单吗？',
				success: async (res) => {
					if (res.confirm) {
						submit();
					}
				}
			});
			const submit = async () => {
				try {
					// 执行异步操作（建议并行处理提高性能）
					const [idRes, appIdRes, appforRes] = await Promise.all([
						CouldDb.addDB('ApplyForGoodDetail', upform),
						CouldDb.addDB('ApplyForStorage', upapplyItem),
						CouldDb.addDB('approval', approval)
					]);
					if (this._isDestroyed) return;
					// 检查所有接口是否成功（根据实际接口返回格式调整）
					if (idRes.code && appIdRes.code && appforRes.code) {
						uni.showToast({
							title: '申请提交成功',
							icon: 'success',
							duration: 2000,
							success() {
								uni.$emit('open', 'appStorageList');
							}
						});
					} else {
						uni.showModal({
							title: '提交失败',
							content: '数据提交不完整，请重试',
							showCancel: false
						});
					}
				} catch (e) {
					// 捕获网络错误或接口抛出的异常
					console.error('提交失败:', e);
					if (this._isDestroyed) return;
					uni.showModal({
						title: '提交失败',
						content: '网络异常，请稍后重试',
						showCancel: false
					});
				} finally {
				}
			};
		},
		sureOrder(res) {
			const batch = JSON.parse(res);
			this.form.items[this.orderIndex].batchOrder = batch.batchOrder;
			this.form.items[this.orderIndex].note = batch.note;
			this.orderIndex = -1;
		},

		resetForm() {
			const today = new Date();
			const year = today.getFullYear();
			const month = (today.getMonth() + 1).toString().padStart(2, '0');
			const day = today.getDate().toString().padStart(2, '0');
			const randomNum = Math.floor(1000 + Math.random() * 9000);
			this.form = {
				applyItem: {
					warehouse: '',
					supplier: '',
					applyUser: '',
					applyDate: `${year}-${month}-${day}`,
					contactPhone: '',
					applyForId: `RK-${this.date}-${randomNum}`,
					note: ''
				},
				goodDetailShow: false,
				dept: '',
				applicant: '',
				items: [{ productId: '', goodName: '', spec: '', unit: '', note: '', quantity: 0, price: 0, batchOrder: null }],
				remark: ''
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.in-stock-form {
	position: relative;
	padding: 20rpx 20rpx;
	background-color: #f5f5f5;
	margin-bottom: 200rpx;
}

.form-header {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	justify-content: center;
	border-bottom: 2rpx solid #eee;
	margin-bottom: 30rpx;
}

.form-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
}

.form-code {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 28rpx;
	color: #666;
}
.unit_input {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	min-width: 100rpx;
	height: 60rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}
.form-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
.placeholder {
	color: #999;
}
.spec-input {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 8px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: pointer;
	background-color: #f5f5f5; /* 只读样式 */
}
.section-title {
	display: flex;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-bottom: 10rpx;
	border-bottom: 2rpx solid #f0f0f0;
	.section-btn {
		display: inline-block;
		font-weight: 400;
		margin-left: 100rpx;
		padding: 10rpx 30rpx;
		background-color: #f0f0f0;
		color: #666;
		border-radius: 30rpx;
		font-size: 28rpx;
		cursor: pointer;
	}
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;
}

.form-col-4,
.form-col-6,
.form-col-12 {
	width: 33.333%;
	margin-bottom: 20rpx;
}

.form-col-6 {
	width: 50%;
}

.form-col-12 {
	width: 100%;
}

.form-label {
	display: flex;
	padding: 10rpx 10rpx;
	align-items: center;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.form-input {
	width: 100%;
	height: 80rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}
.input_piker {
	display: flex;
	align-items: center;
}
.disable {
	display: flex;
	align-items: center;
	background-color: #f0f0f0;
}

.form-textarea {
	width: 100%;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.table-header {
	display: flex;
	background-color: #f8f8f8;
	border-radius: 8rpx 8rpx 0 0;
	margin-bottom: -2rpx; /* 抵消边框间距 */
}

.th {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	padding: 20rpx;
	text-align: center;
	border-bottom: 2rpx solid #eee;
}

.th-1 {
	width: 20%;
}
.th-2 {
	width: 25%;
}
.th-3 {
	width: 15%;
}
.th-4 {
	width: 10%;
}
.th-5 {
	width: 20%;
}
.th-6 {
	width: 23%;
}

.table-body {
	border: 2rpx solid #eee;
	border-top: none;
	border-radius: 0 0 8rpx 8rpx;
}

.table-row {
	display: flex;
	border-bottom: 2rpx solid #f5f5f5;
}

.table-row:last-child {
	border-bottom: none;
}

.td {
	display: flex;
	justify-content: space-evenly;
	padding: 20rpx;
	font-size: 28rpx;
	color: #666;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.td-1 {
	position: relative;

	width: 20%;
}
.td-2 {
	position: relative;
	width: 25%;
}
.td-3 {
	width: 15%;
}
.td-4 {
	width: 10%;
}
.td-5 {
	width: 20%;
}
.td-6 {
	width: 23%;
}



.amount {
	color: #e64340;
	font-weight: 500;
}

.add-row {
	text-align: center;
	padding: 20rpx 0;
}

.add-btn {
	display: inline-block;
	padding: 10rpx 30rpx;
	background-color: #f0f0f0;
	color: #666;
	border-radius: 30rpx;
	font-size: 28rpx;
	cursor: pointer;
}

.total-row {
	display: flex;
	background-color: #f8f8f8;
	font-weight: bold;
	padding: 20rpx;
	border-radius: 0 0 8rpx 8rpx;
}

.total-col {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #333;
}

.total-amount {
	color: #e64340;
}

.approval-row {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}

.approval-col {
	flex: 1;
	text-align: center;
}

.approval-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.approval-info {
	font-size: 32rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 5rpx;
}

.approval-date {
	font-size: 26rpx;
	color: #999;
}

.approval-line {
	width: 40rpx;
	height: 2rpx;
	background-color: #eee;
	position: relative;
}

.approval-line::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #eee;
}

.form-actions {
	display: flex;
	justify-content: center;
	padding: 30rpx 0;
}

.btn {
	width: 300rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 40rpx;
	font-size: 32rpx;
	margin: 0 20rpx;
}

.btn-primary {
	background-color: #409eff;
	color: #fff;
}

.btn-secondary {
	background-color: #fff;
	color: #666;
	border: 2rpx solid #ddd;
}

.del-btn {
	color: #e64340;
	font-size: 28rpx;
	cursor: pointer;
}
.handlebatch {
	position: relative;
	color: #409eff;
	cursor: pointer;
	:active {
		color: #666;
	}
}
</style>
